<template>
  <view style="height: 100%">
    <scroll-view class="flex-1" scroll-y style="padding-bottom: 120upx">
      <view class="u-padding-40">
        <img :src="info.listImage" alt="" style="width: 100%;height: 370rpx" class="u-m-b-40">
        <view class="u-font-40 font-b" style="color: rgb(16, 16, 16)">
          {{info.actName}}
        </view>
        <view style="color: rgba(16,16,16, .46)" class="u-m-t-10 u-m-b-10">报名人数：{{info.total || 0}}</view>
        <view class="u-flex u-col-center u-m-b-10" style="color: rgba(16,16,16, .46)">
          <u-icon name="clock" color="rgba(16,16,16, .46)" size="36" class="u-m-r-8"></u-icon>
          <view>{{info.startTime}} ~ {{info.endTime}}</view>
        </view>
        <view class="u-flex u-col-center" style="color: rgba(16,16,16, .46)" @click="openLocation">
          <u-icon name="map-fill" color="rgba(16,16,16, .46)" size="36" class="u-m-r-8"></u-icon>
          <view>{{info.actAddress}}</view>
          <u-icon name="arrow-right" color="rgba(16,16,16, .46)" size="30" v-if="info.latitude && info.longitude"></u-icon>
        </view>
      </view>
      <u-parse :html="detail"></u-parse>
    </scroll-view>
    <view class="bottom bg-fff u-flex">
      <button style="background: transparent;color: #101010;font-size: 28upx" class="button-row" id="shareBtn" open-type="share" type="primary">
        <view class="u-flex flex-center">
          <u-icon :name="require('../../../static/icon/share.png')" color="#888" size="36" class="u-m-r-10"></u-icon>
          <span>分享</span>
        </view>
      </button>
      <button style="background: transparent;color: #101010;font-size: 28upx" class="button-row" id="shareBtn"
              open-type="contact" type="primary">
        <view class="u-flex flex-center">
          <u-icon name="server-fill" color="#888" size="36" class="u-m-r-10"></u-icon>
          <span>咨询</span>
        </view>
      </button>
      <view class="flex-1">
        <u-button type="primary" :custom-style="customStyle121"
                  v-if="newType == 'can'"
                  @click="toNew"
                  shape="circle">立即报名</u-button>
        <u-button type="primary" :custom-style="customStyle"
                  v-if="newType == 'past'"
                  shape="circle">已结束</u-button>
        <u-button type="primary" :custom-style="customStyle"
                  v-if="newType == 'haveInput'"
                  shape="circle">已报名</u-button>
      </view>
    </view>
  </view>
</template>

<script>
  import {THEME} from "../../mixins/config";
  import {request} from "../../../util/api";

  export default {
    data() {
      return {
        current_id: '',
        customStyle121: {
          background: '#8FB053',
          padding: '0 30rpx',
          width: '90%'
        },
        customStyle: {
          background: 'rgba(16, 16, 16, 0.32)',
          padding: '0 30rpx',
          width: '90%'
        },
        detail: '',
        id: '',
        info: {}
      }
    },
    computed: {
      newType() {
        let endEvaluateTime = new Date(this.info.endRegistration.replace(/-/g,'/')).getTime()
        // let endTime = new Date(this.info.endTime.replace(/-/g,'/')).getTime()
        if (this.info.applyFlag == 1) {
          return 'haveInput'
        }
        if (new Date().getTime() - endEvaluateTime > 0) {
          return 'past'
        }
        return 'can'
      }
    },

    onLoad(option) {
      this.id= option.id
    },

    onShow() {
      request({
        url: '/system/CompassActInfo/' + this.id
      }).then(res => {
        this.detail = res.data.actDesc
        this.info = res.data
        /*uni.setNavigationBarTitle({
          title: res.data.actName
        });*/
      })
    },

    onShareAppMessage(res) {

    },

    methods: {
      toNew(id) {
        this.$u.route({
          url: '/pages/index/act/new',
          params: {
            id: this.id
          }
        })
      },

      openLocation() {
        if (this.info.latitude && this.info.longitude) {
          uni.openLocation({
            latitude: Number(this.info.latitude),
            longitude: Number(this.info.longitude),
            name: this.info.actAddress,
            success: function () {
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20upx 0;
  }
  .button-row::after {
    content: "";
    border: none;
  }
</style>
